<template>
	<view class="container">
		<view class="top">
			<view class="price-container">
				<text class="symbol" space="nbsp">{{info.symbol}} </text>
				{{info.price}}
			</view>
			<view class="exchange-rate" style="margin-bottom:4rpx;margin-top:18rpx;" v-if="info.foreign" space="nbsp">
				约人民币：￥{{info.totalExchangePrice}} </view>
			<view class="exchange-rate" v-if="info.foreign" space="nbsp">预估汇率：{{info.symbol}}1 = ￥{{info.exchangeRate}}
			</view>
			<!-- <text class="time" wx:if="{{info.payDeadLineTime}}">支付剩余时间 {{time.h}} : {{time.m}} : {{time.s}}</text> -->
		</view>
		<view class="row">
			<text class="hint">商品名称</text>
			<text class="title">{{info.title}}</text>
		</view>
		<view class="line-container">
			<view></view>
		</view>
		<view class="row">
			<text class="hint">支付方式</text>
			<image class="wechat" src="https://staticontent.shop2cn.cn/shop2cn/mp/images/ic_wechat.png"
				mode="scaleToFill"></image>
			<text style="color:#07C160;font-family: PingFangSC-Medium;">微信支付</text>
		</view>
		<view class="pay" v-if="needCheckOrderStatus">等待支付中，请稍后…<view v-if="delayTime">({{delayTime}}s)</view>
		</view>
		<view class="pay" @click="gotoPay" v-else>微信付款 {{info.symbol}} {{info.price}}</view>
	</view>
</template>

<script>
	const config = require('../../../config')
	const shopPlugin = require('../../../api')

	export default {
		data() {
			return {
				needCheckOrderStatus: false,
				info: {},
				delayTime: 0,
				timer: null
			}
		},
		onLoad(options) {
			if (options && options.extraData) {
				var info = JSON.parse(decodeURIComponent(options.extraData))
				this.info = info
			}
		},
		onShow() {
			uni.hideLoading();
			if (this.needCheckOrderStatus) {
				this.checkOrderStatus()
			}
		},

		onHide: function() {
			this.clearTimeout()
		},

		onUnload() {
			this.clearTimeout()
		},

		methods: {
			gotoPay() {
				const cashierAppID = config.CASHIER_APP_ID
				uni.showLoading({
					title: "加载中……"
				});
				const navObj = {
					appId: cashierAppID,
					path: "/subPackCashier/pages/cashier/cashier",
					extraData: this.info,
					envVersion: 'release',
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
						});
						this.needCheckOrderStatus = false
					},
				}
				const version = uni.getSystemInfoSync().SDKVersion
				//2.23.4 以下有些收银小程序自动降级navigateToMiniProgram 接受不到extraData
				var useOpenEmbeddedMiniProgram = this.compareVersion(version, '2.23.4') >= 0

				if (useOpenEmbeddedMiniProgram && uni.openEmbeddedMiniProgram) {
					uni.openEmbeddedMiniProgram(navObj)
				} else {
					uni.navigateToMiniProgram(navObj)
				}
				this.needCheckOrderStatus = true
				shopPlugin.payUtil.setThirdPayData(this.info)
			},

			compareVersion(v1, v2) {
				v1 = v1.split('.')
				v2 = v2.split('.')
				const len = Math.max(v1.length, v2.length)

				while (v1.length < len) {
					v1.push('0')
				}
				while (v2.length < len) {
					v2.push('0')
				}

				for (let i = 0; i < len; i++) {
					const num1 = parseInt(v1[i])
					const num2 = parseInt(v2[i])

					if (num1 > num2) {
						return 1
					} else if (num1 < num2) {
						return -1
					}
				}
				return 0
			},
			checkOrderStatus() {
				var _this = this
				_this.clearTimeout()
				var delay = 10
				this.delayTime = delay
				_this.timer = setInterval(function() {
					if (delay >= 0) {
						this.delayTime = delay
						delay -= 1;
						if (delay % 2 == 0) {
							shopPlugin.payUtil.checkOrderStatus(_this.info, (pay) => {
								if (pay || delay == 0) {
									shopPlugin.payUtil.payResult(pay, _this.info)
								}
							})
						}
					} else {
						_this.clearTimeout()
					}
				}, 1000);
			},
			clearTimeout() {
				if (this.timer) clearInterval(this.timer);
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		width: 100%;
		background: #F8F8F8;
	}

	.container {
		display: flex;
		flex-direction: column;
		padding: 0rpx;
		justify-content: flex-start;
		align-items: center;
		color: #666;
		font-size: 28rpx;
	}

	.top {
		width: 100%;
		background: white;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: #090A0E;
		justify-content: center;
		align-items: center;
		margin-bottom: 24rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		padding-top: 80rpx;
		padding-bottom: 80rpx;
	}

	.exchange-rate {
		font-size: 24rpx;
		color: #bbb;
		margin-bottom: 16rpx;
	}

	.price-container {
		display: flex;
		flex-direction: row;
		font-size: 64rpx;
		font-weight: bold;
		color: #F23340;
		justify-content: flex-end;
		margin-bottom: 18rpx;
		align-items: baseline;
	}

	.symbol {
		font-size: 32rpx;
	}

	.time {
		background: rgba(187, 187, 187, 0.2);
		border-radius: 44rpx;
		padding-left: 26rpx;
		padding-right: 22rpx;
		height: 44rpx;
		line-height: 44rpx;
		margin-top: 18rpx;
	}

	.row {
		display: flex;
		flex-direction: row;
		width: 686rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		font-size: 28rpx;
		text-align: center;
		justify-content: flex-start;
		background: white;
	}

	.hint {
		width: 152rpx;
		flex-shrink: 0;
		text-align: left;
	}

	.title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
		color: #090A0E;
		text-align: left;
	}

	.wechat {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
		margin-top: 4rpx;
	}

	.line-container {
		height: 2rpx;
		width: 686rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		background: white;
	}

	.line-container view {
		background: #F8F8F8;
		height: 100%;
		width: 100%;
	}

	.pay {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 686rpx;
		height: 90rpx;
		border-radius: 8rpx;
		background: #07C160;
		color: white;
		text-align: center;
		line-height: 90rpx;
		font-size: 34rpx;
		margin-top: 64rpx;
		margin-bottom: 32rpx;
		font-family: PingFangSC-Medium;
	}

	.support {
		font-size: 24rpx;
		color: #bbb;
		line-height: 36rpx;
		display: flex;
		flex-direction: row;
	}

	.seller-name {
		color: #666;
	}
</style>